<script lang="ts" setup name="takeoutProduct">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { ref, reactive, onMounted } from "vue";
import {
  bindingGoodsAPI,
  getTakeoutListAPI,
  takeoutBindingAPI,
  unbindingGoodsAPI,
  relevancyWaimaiGoodsAPI
} from "@/api/modules/takeout";
import { Goods, Takeout } from "@/api/interface";
import SelectTreeData from "@/components/SelectTreeData/index.vue";
import { getFoodCategoryList, getGoodsList } from "@/api/modules/goods";
import { ElMessage } from "element-plus";
import { useHandleData } from "@/hooks/useHandleData";
// 表格配置项
const proTableRef = ref<ProTableInstance>();
const initParams = reactive<{ sourceType: number }>({
  sourceType: 2
});
const columns: ColumnProps<any>[] = [
  {
    type: "index",
    label: "序号",
    width: 80
  },
  {
    prop: "sourceFoodName",
    label: "商品名称",
    align: "left",
    sortable: true
  },
  {
    sortable: true,
    prop: "sourceCategoryName",
    label: "菜品分类",
    align: "left",
    width: 120
  },
  {
    sortable: true,
    prop: "sourcePrice",
    label: "价格",
    width: 120
  },
  {
    sortable: true,
    prop: "sourceSpecName",
    label: "规格/单位名称"
  },
  {
    sortable: true,
    prop: "status",
    label: "状态",
    width: 120
  },
  {
    sortable: true,
    prop: "foodName",
    label: "关联商品名"
  },
  {
    sortable: true,
    prop: "operation",
    label: "操作"
  }
];
const dataCallback = (e: any) => {
  return e;
};

const onBinding = async () => {
  await takeoutBindingAPI({ sourceType: initParams.sourceType });
  ElMessage({
    type: "success",
    message: "绑定成功"
  });
  proTableRef.value?.getTableList();
};

const selectGoods = ref<InstanceType<typeof SelectTreeData> | null>();
const item = ref<Takeout.TakeoutOrderList>();
const singleBinding = (e: Takeout.TakeoutOrderList) => {
  item.value = e;
  selectGoods.value?.acceptParams({
    title: "选择菜品",
    isView: false,
    selType: "radio",
    // selTags: [], // 选中的数组
    columns: [
      { type: "radio", label: "#", width: 60 },
      { prop: "name", label: "菜品名称", align: "left" },
      { prop: "foodSpecName", label: "量", align: "left" },
      { prop: "foodTypeName", label: "分类", align: "left" }
    ],
    api: getGoodsList,
    treeApi: getFoodCategoryList
  });
};
interface E {
  data: Goods.ResGoodsList;
  index: any;
}
const onSelectGoods = async (e: E) => {
  item.value!.foodId = e.data.id;
  item.value!.specId = e.data.foodSpecId;
  await bindingGoodsAPI(item.value);
  ElMessage({
    type: "success",
    message: "绑定成功"
  });
  proTableRef.value?.getTableList();
};

const unbinding = async (e: Takeout.TakeoutOrderList) => {
  await useHandleData(unbindingGoodsAPI, e, "解除绑定");
  proTableRef.value?.getTableList();
};

// 关联
const relevancy = (type: string, sourceType: number) => {
  initParams.sourceType = sourceType;
  // proTableRef.value?.getTableList();
};
</script>

<template>
  <div class="table-box">
    <ProTable
      ref="proTableRef"
      :init-param="initParams"
      :pagination="false"
      :request-api="relevancyWaimaiGoodsAPI"
      :columns="columns"
    >
      <template #tableHeader>
        <el-button type="primary" @click="onBinding">{{ initParams.sourceType == 2 ? "饿了么" : "美团" }}一键绑定</el-button>
        <div style="flex: 1">
          <el-button @click="relevancy('element', 2)" icon="RefreshRight">饿了么商品关联</el-button>
          <el-button @click="relevancy('meituan', 1)" icon="RefreshRight">美团商品关联</el-button>
        </div>
      </template>

      <template #operation="{ row }">
        <div>
          <el-button v-if="!row.status" type="primary" @click="singleBinding(row)" link>绑定</el-button>
          <el-button v-else type="primary" @click="unbinding(row)" link>解绑</el-button>
        </div>
      </template>
      <template #status="{ row }">
        <div>{{ row.status ? "已绑定" : "未绑定" }}</div>
      </template>
    </ProTable>

    <SelectTreeData ref="selectGoods" @radio="onSelectGoods"></SelectTreeData>
  </div>
</template>

<style lang="scss" scoped></style>
